<template>
  <div class="right">
    <h1>产后推荐食谱</h1>
    <ul>
      <li @click="goDetail">
        <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3777373589,1143314085&fm=173&app=25&f=JPEG?w=400&h=294&s=E0BB3DD74A037EC4362414700300C068" alt="">
        <h3>山药红枣鸡汤</h3>
        <p>鸡汤、鱼汤、排骨汤含有易于人体吸收的蛋白质、还可促进泌乳。</p>
        <p>适合孕期妈妈</p>
      </li>
      <li @click="goDetail">
        <img src="http://pics.mama.cn/attachment/mamacn/images/201805/20180528/103119_88053.jpg" alt="">
        <h3>板栗烧鸡翅</h3>
        <p>让准妈妈食欲大增</p>
        <p>适合孕期妈妈</p>
      </li>
      <li @click="goDetail">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2544391872,1748518522&fm=26&gp=0.jpg" alt="">
        <h3>营养的水果</h3>
        <p>为此在加强营养的同时，食量也要增加，不要太考虑自己的身材，</p>
        <p>适合孕期妈妈</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      foodlist: []
    }
  },
  methods: {
    goDetail () {
      this.$router.push('/detail')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.right {
  @include rect(78%, 100%);
  // overflow: auto;
  float: left;
  h1 {
    padding: 0.15rem 0 0 0.1rem;
  }
  ul {
    @include rect(96%, 100%);
    margin: 3% auto;
    li {
      height: 1rem;
      border-bottom: 1px solid #cccccc;
      img {
        @include rect(0.6rem, 0.6rem);
        float: left;
        margin: 0.1rem;
      }
      h3 {
        @include rect(70%, auto);
        float: left;
        font-size: 0.14rem;
        line-height: 0.25rem;
        color: rgb(17, 17, 17);
        font-family: PingFangSC-regular;
        font-weight: 500;
        margin-top: 0.05rem;
      }
      p {
        font-size: 0.12rem;
        line-height: 0.2rem;
        color: #838383;
      }
    }
  }
}
</style>
